<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ball {
            border-radius: 50px;
            width: 10px;
            height: 10px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="加入购物车" @click="flag =! flag" />
        <transition 
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
            <div v-show="flag" id="ball"></div>
        </transition>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                beforeEnter(el) {
                    // ...
                    el.style.transform="translate(0, 0)"
                },
                enter(el, done) {
                    //这句话没有实际作用，不写出不来动画效果
                    //可以认为el.offsetWidth 会强制动画刷新
                    el.offsetWidth

                    el.style.transform = "translate(150px, 450px)"
                    el.style.transition = "all 1s ease"

                    // 这里的done，其实就是afterEnter这个函数
                    done()
                },
                afterEnter(el) {
                    // console.log("结束")
                    this.flag = !this.flag
                }

            }
        });
    </script>
</body>
</html>